{% extends 'IMTDashboardBundle::layout.html.twig' %}

{% block main_title %}Planning{% endblock %}

{% block include_style %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/imtdashboard/css/fullcalendar.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/imtdashboard/css/fullcalendar.print.css') }}">
{% endblock %}

{% block include_script %}
<script src="{{ asset('bundles/imtdashboard/js/jquery-ui-1.8.17.custom.min.js') }}"></script>
<script src="{{ asset('bundles/imtdashboard/js/fullcalendar.js') }}"></script>
<script>
$(document).ready(function() {
	$('[rel=tooltip]').tooltip();
	
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
	
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		timeFormat: 'H(:mm)',
		selectable: true,
		selectHelper: true,
		select: function(start, end, allDay) {
			/*var title = prompt('Event Title:');
			if (title) {
				calendar.fullCalendar('renderEvent',
					{
						title: title,
						start: start,
						end: end,
						allDay: allDay
					},
					true // make the event "stick"
				);
			}
			calendar.fullCalendar('unselect');
			*/
		},
		editable: true,
		events: {% render 'IMTDashboardBundle:Calendar:allEvent' %},                        
        eventClick: function(calEvent, jsEvent, view) {
	        $("#modalEventTitle").html(calEvent.title);
	        $("#modal_event_content").html(calEvent.content);
	        $("#owner").html(calEvent.owner_name+" ");
	        $("#owner").append(calEvent.owner_firstname);
	        $("#event_start").append(calEvent.start_f);	
	        $("#event_end").append(calEvent.end_f);	
	        $("#modalEventFooter a").attr('href','{{ path('event_accueil') }}'+calEvent.id);
            $("#modalEvent").modal('show');		
	    },
	    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
			$.ajax({
				url: '{{ path('accueil_planning_update', {'type':'move'}) }}',
				global: false,
				type: "POST",
				data: {
					idEvent:event.id,
					dayDelta:dayDelta,
					minuteDelta:minuteDelta,
					allDay:(allDay ? 1 : 0),
		       	},
				dataType: "json",
				async:true,
				success: function(r) {					
					if(r.response == 200){

					} else if(r.response == 400){
					
					} else if(r.response == 500){
						alert(r.params);
					}
				},
				error: function(){
					alert('erreur serveur');
				},
				complete: function(){	
				}
			});
	    },
	    eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
	    	$.ajax({
				url: '{{ path('accueil_planning_update', {'type':'resize'}) }}',
				global: false,
				type: "POST",
				data: {
					idEvent:event.id,
					dayDelta:dayDelta,
					minuteDelta:minuteDelta,
		       	},
				dataType: "json",
				async:true,
				success: function(r) {					
					if(r.response == 200){

					} else if(r.response == 400){
					
					} else if(r.response == 500){
						alert(r.params);
					}
				},
				error: function(){
					alert('erreur serveur');
				},
				complete: function(){	
				}
			});
	    }
	});

	//$("#calendar").fullCalendar( 'renderEvent',{title: 'Test add event',start: new Date(2012, 6, 10),end: new Date(2012, 6, 12), className: ["test"], end: new Date(2012, 7,7)},true);
	// Définition de l'evenement lors du clic sur un compte
	$('#listAccount tr td.account-content-box').click(function(){
		updateAccountSelection($(this), false);
	});      

	// Mise à jour de tout les comptes au chargement de la page
	$('#listAccount tr td.account-content-box').each(function(){
		$(this).children('input[type=checkbox]').attr('checked',false);
		updateAccountSelection($(this), true);
	});
});

function updateAccountSelection(account, init){
	var color = account.children('input[type=hidden][name=colorAccount]').val();
	
	if(account.children('input[type=checkbox]').is(':checked')){
		account.children('div').removeClass(color);
		account.children('input[type=checkbox]').attr('checked',false);
				
		// Sauvegarde puis suppression des events du compte dans le Dom de account
		var events = [];
		$.each(account.children('input[type=checkbox]').val().split(';'),function(i,id){
			if(id != ''){
				events[id] = {};
				$.extend(events[id], $("#calendar").fullCalendar('clientEvents', id));
				$("#calendar").fullCalendar('removeEvents', id);
			}
		});	
		account.data('events', events);
	} else {
		account.children('div').addClass(color);
		account.children('input[type=checkbox]').attr('checked',true);
		
		// Récupération des events depuis le DOM
		var events = account.data('events');
		
		$.each(events,function(i,event){
			
			if(typeof event != 'undefined' && typeof event.source != 'undefined'){
				$("#calendar").fullCalendar( 'renderEvent', $.extend({},event), true);
			} else if(typeof event != 'undefined'){
				$.each(event,function(j,event2){
					if(typeof event != 'undefined'){
						$("#calendar").fullCalendar( 'renderEvent', $.extend({},event2), true);
					}
				});
			} 
		});		
	}
}
</script>
{% endblock %}

{% block content %}

    <div class="modal hide fade" id="modalEvent">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3 id="modalEventTitle"></h3>
        </div>
        <div class="modal-body"  id="modalEventContent">
        	<div style="width:30%; float:left;">
        		<h4>Créateur</h4>
        		<div class="span3 avatar" style="margin-top:15px; margin-bottom:0px!important;">
				<ul class="thumbnails">
					<li style="margin-left:10px!important;  margin-bottom:0px!important;">
						<a class="thumbnail" href="#">
							<img alt="" src="{{ asset('bundles/imtevent/images/avatar1.jpg') }}">
						</a>
					</li>
				</ul>	
				</div>
				<div id="owner" style="margin-left:13px;"></div>
        	</div>
        	<div style="width:70%; float:right;">
        		<h4>Horaires</h4>
        		<div style="margin-top:13px;">
        			<div id="event_start"><i>Début :</i> </div>
        			<div id="event_end"><i>Fin :</i> </div>
        		</div>
        		<br>
        		<h4>Contenu de l'évenement</h4>
        		<div id="modal_event_content" style="margin-top:13px;"></div>
        	</div>
        </div>
        <div class="modal-footer" id="modalEventFooter">
            <a href="#" class="btn btn-primary">Voir détail</a>
        </div>
    </div>

<div class="row-fluid">
	<div class="span12">
		<div class="page-header">
		    <h1>Planning <small><i>Le temps est comme l'argent, ne le perdez pas et vous en aurez ...</i></small></h1>
		</div>
	</div>
</div>
<div class="row-fluid">
	<div class="span10">
		{% include 'IMTDashboardBundle:Planning:index.html.twig' %}
	</div>
	<div class="span2">
		<fieldset>
			<legend style="margin-bottom:12px;">Mes comptes</legend>
			{% render 'IMTAccountBundle:Default:list' with {'active' : true} %}
		</fieldset>
	</div>
</div>
{% endblock %}